<template>
    <div class="collect flexv">
        <!-- 头部 -->
        <pubHead title="商品收藏" rightSize="0.3rem">
            <div slot="charge" v-if="!isNone" :class="{'reds': type }" @click="changeType">{{type ? '完成' : '编辑'}}</div>
        </pubHead>

        <!-- 列表 -->
        <div class="collect_lists flexv" v-if="!isNone">
            <van-list v-model="loading" :finished="finished" @load="getData">
                <div class="collect_list mt2 flex" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
                    <!-- 选择框 -->
                    <img src="@/assets/check.png" @click.stop="select(item.id,index)" v-if="type && !item.select" class="check" alt="">
                    <img src="@/assets/checked.png" @click.stop="select(item.id,index)" v-if="type && item.select" class="check" alt="">

                    <!-- 商品图片 -->
                    <div class="flex collect_img">
                        <img :src="item.images" v-lazy="item.images" alt="">
                    </div>

                    <div class="flex1 flexv collect_infos jus-b">
                        <p class="twoline title">{{item.goods_name}}</p>

                        <p class="price">￥{{item.price}}</p>
                    </div>
                </div>
            </van-list>
        </div>

        <!-- 空列表 -->
        <div class="empty_area flexv jus-c" v-else>
            <img src="@/assets/k_collection.png" alt="">
            <p class="tc mt2">亲，你还没有收藏哦～</p>
        </div>

        <!-- 底部栏 -->
        <div class="footer_boxs" v-if="type">
            <div class="collect_foot jus-b">
                <div class="left ali-c">
                    <img src="@/assets/check.png" @click="selectAll" v-if="!chooseAll" class="check" alt="">
                    <img src="@/assets/checked.png" @click="selectAll" v-else class="check" alt="">
                    <span class="note">全选</span>
                </div>

                <div class="right white tc" :class="ids.length > 0 ? 'on' : ''" @click="delBtn">删除</div>
            </div>
        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import { u_Reg } from '@/config/utils.js';
import { Toast, Dialog, List } from 'vant';
import { collectlist, collecteDel } from '@/request/api';

Vue.use(Toast, Dialog, List)
export default {
    data(){
        return{
            once: true, // 防止重复提交
            isNone: false, // 是否为空
            type: false, // 是否是编辑状态
            chooseAll: false, // 是否全选
            // 列表相关
            list: [],
            page: 0,
            pagesize: 10,
            finished: false,
            loading: false,
            ids: [], // 选中的藏品id
        }
    },
    components: {
        pubHead,
        "van-list":List,
    },
    created(){
        this.$loading();
    },
    methods: {
        // 获取数据
        getData(){
            this.loading = true;
            collectlist({
                token: localStorage.getItem('token'),
                page: ++this.page,
                pagesize: this.pagesize
            }).then(res =>{
                Toast.clear();
                this.loading = false;
                if(res.code == 1){
                    this.finished = Number(res.data.list.length) >= Number(this.pagesize) ? false : true;
                    if(res.data.list.length > 0){
                        res.data.list.forEach((item) => {
                            item.select = false;
                            if(item.images.indexOf('http') == -1){
                                item.images = 'http://dxm.0791jr.com'+item.images;
                            }
                        });
                        this.list = [...this.list,...res.data.list];
                    }

                    if(this.list.length < 1){
                        this.isNone = true
                    }else{
                        this.isNone = false;
                    }

                }
            })
        },
        // 改变状态
        changeType(){
            this.type = !this.type
        },
        // 去商品详情
        toDetail(item){
		console.log(item.item_type)
			if(item.item_type==0){
				this.$router.push('/goodsDetail?id='+item.goods_id+'&type='+ item.item_type)
			}else if(item.item_type!=0){
				this.$router.push('/detail?id='+item.goods_id+'&type='+ item.item_type)
			}
        },
        // 选择收藏商品
        select(id,index){
            this.list[index].select = !this.list[index].select;

            // 计算选中数量
            this.getAllCount();
        },
        // 全选
        selectAll(){
            this.chooseAll = !this.chooseAll;
            this.list.forEach((item) =>{
                if(this.chooseAll){
                    item.select = true;
                }else{
                    item.select = false;
                }
            })

            this.getAllCount();
        },
        getAllCount(){
            this.ids = [];
            let len = 0,old = this.list;
            old.forEach((item) =>{
                if(item.select){
                    ++len;
                    this.ids.push(item.id)
                }
            })

            if(len == this.list.length){
                this.chooseAll = true;
            }else{
                this.chooseAll = false;
            }
        },
        // 删除
        delBtn(){
            let that = this;
            if(this.ids.length > 0){
                Dialog.confirm({
                    title: '您确定要删除所选商品吗?',
                    confirmButtonColor: '#ff4400'
                }).then(res =>{
                    collecteDel({
                        token: localStorage.getItem('token'),
                        ids: this.ids.join(','),
                    }).then(ress =>{
                        this.$tip(ress.msg)
                        if(ress.code == 1){
                            this.chooseAll = false;
                            this.type = false;
                            that.page = 0;
                            that.list = [];
                            that.getData();
                        }
                    })
                }).catch(err =>{
                })
            }else{
                this.$tip('请选择要删除的藏品!');
            }
        },
    },
}
</script>
<style lang="less" scoped>
.collect{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 列表
    .collect_lists{
        padding: 0 0.3rem;
        .collect_list{
            padding: 0.3rem 0.24rem;
            border-radius: 0.1rem;
            background-color: #fff;
            .check{
                width: 0.4rem;
                height: 0.4rem;
                margin: auto 0.24rem auto 0;
            }
            .collect_img{
                width: 1.8rem;
                height: 1.8rem;
                border-radius: 0.1rem;
                border: 1px solid #f5f5f5;
                img{
                    margin: auto;
                }
            }
            .collect_infos{
                margin-left: 0.24rem;
                .title{
                    font-size: 0.26rem;
                    line-height: 150%;
                    color: #333;
                }
                .price{
                    font-size: 0.28rem;
                    line-height: 120%;
                    color: #FF4400;
                }
            }
        }
    }
    // 空列表
    .empty_area{
        width: 100%;
        height: calc(100vh - 0.88rem);
        img{
            width: 3.24rem;
            height: 3.06rem;
            margin: 0 auto 0;
        }
        p{
            font-size: 0.3rem;
            line-height: 120%;
            color: #999;
        }
    }
    // 底部栏
    .footer_boxs{
        width: 100%;
        height: 0.98rem;
        .collect_foot{
            width: 100%;
            max-width: 750px;
            height: 0.98rem;
            margin: 0 auto;
            position: fixed;
            z-index: 100;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            .left{
                padding-left: 0.3rem;
                .check{
                    width: 0.4rem;
                    height: 0.4rem;
                }
                .note{
                    margin-left: 0.14rem;
                    font-size: 0.3rem;
                    line-height: 120%;
                    color: #666;
                }
            }
            .right{
                width: 2rem;
                font-size: 0.32rem;
                line-height: 0.98rem;
                background-color: #ccc;
            }
            .right.on{
                background-color: #53AB2A;
            }
        }
    }
}
</style>